<template>
    <div>
        <h2>房号列表</h2>
        <div>
            <span>房号名称:</span>
            <input type="text" v-model="model.HouseNoName">
            <input type="button" value="查询" class="btn btn-success" @click="ok">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>房型名称</td>
                    <td>房号名称</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in list" :key="item.Id">
                    <td>{{ item.HouseTypeName }}</td>
                    <td>{{ item.HouseNoName }}</td>
                    <td>{{ item.State == 1 ? '上架' : '下架' }}</td>
                    <td>

                        <input type="button" value="删除" class="btn btn-danger" @click="housenodel(item.Id)">
                        <input type="button" value="编辑" class="btn btn-info" @click="housenoedit(item.Id)">
                        <input type="button" v-if="item.State == 1" value="下架" class="btn btn-success"
                            @click="housenoestate(item.Id, item.State)">
                        <input type="button" v-if="item.State == 0" value="上架" class="btn btn-success"
                            @click="housenoestate(item.Id, item.State)">
                    </td>
                </tr>





            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
const router = useRouter()
const route = useRoute()

let list: any = ref([]);

let model = reactive({

    HouseNoName: '',

})


onMounted(() => {
    ok();
})


//查询
const ok = () => {

    axios({
        url: 'https://localhost:7154/api/HouseNo/HouseNoList',
        method: 'get',
        params: model,
    })
        .then(res => {
            console.log(res);
            list.value = res.data;


        })

        .catch(err => {
            console.log(err);
        })


}


//跳转
const housenoedit = (Id: any) => {

    router.push({
        path: '/houseNoUpd',
        query: { Id: Id },
    })
}




//删除
const housenodel = (Id: any) => {

    var f = confirm('确定要删除吗？');
    if (f == true) {

        axios({
            url: 'https://localhost:7154/api/HouseNo/HouseNoDel',
            method: 'delete',
            params: { Id: Id },
        })

            .then(res => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功');
                    ok();
                    return;
                } else {
                    alert('删除失败');
                    return;
                }

            })

            .catch(err => {
                console.log(err);
            })



    }


}



//修改状态
const housenoestate = (Id: any, State: any) => {

if (State == 1) {
    State = 0;
} else {
    State = 1;
}


    axios({
        url: 'https://localhost:7154/api/HouseNo/HouseNoState',
        method: 'put',
        params: { Id: Id, State: State },
    })

        .then(res => {
            console.log(res);
            if (res.data > 0) {
                alert('修改成功');
                ok();
                return;
            } else {
                alert('修改失败');
                return;
            }

        })

        .catch(err => {
            console.log(err);
        })
}

</script>

<style scoped></style>